<template>
	<view class="help-box">
		<view class="help-title">其他问题</view>
		<view class="help-tip">
			<u-row gutter="15">
				<u-col span="6">
					<button class="help-tip-item" open-type="contact">
						<text class="custom-icon custom-icon-kefu tip-item-icon"></text>
						<view class="">人工客服</view>
					</button>
				</u-col>
				<u-col span="6">
					<button class="help-tip-item" open-type="feedback">
						<text class="custom-icon custom-icon-yijianfankui- tip-item-icon"></text>
						<view class="">意见反馈</view>
					</button>
				</u-col>
			</u-row>
		</view>
		<view class="help-title">常见问题</view>
		<view class="collapse-box">
			<view class="collapse-title">使用问题</view>
			<u-cell-group>
				<u-cell @click="jumpPage('/packMyself/help/helpInfo?id=' + item.id)" v-for="item in useHelpList" :isLink="true" :key="item.id" :title="item.helpTitle"></u-cell>
			</u-cell-group>
		</view>
		<view class="collapse-box">
			<view class="collapse-title">站点问题</view>
			<u-cell-group>
				<u-cell @click="jumpPage('/packMyself/help/helpInfo?id=' + item.id)" v-for="item in siteHelpList" :isLink="true" :key="item.id" :title="item.helpTitle"></u-cell>
			</u-cell-group>
		</view>
		<view class="collapse-box">
			<view class="collapse-title">费用问题</view>
			<u-cell-group>
				<u-cell @click="jumpPage('/packMyself/help/helpInfo?id=' + item.id)" v-for="item in costHelplList" :isLink="true" :key="item.id" :title="item.helpTitle"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			useHelpList: [], // 使用问题列表
			siteHelpList: [], // 站点问题列表
			costHelplList: [] // 费用问题列表
		};
	},
	onLoad() {
		this.getHelpList();
	},
	methods: {
		//跳转到详情
		jumpPage(url) {
			uni.navigateTo({
				url
			});
		},
		async getHelpList() {
			// 初始化
			this.useHelpList = [];
			this.siteHelpList = [];
			this.costHelplList = [];
			const res = await this.$api.helpDoc.helpDocAllList();
			if (res.data.list) {
				res.data.list.forEach(item => {
					if (item.helpClassType === 1001) this.useHelpList.push(item);
					if (item.helpClassType === 1002) this.siteHelpList.push(item);
					if (item.helpClassType === 1003) this.costHelplList.push(item);
				});
			}
		}
	}
};
</script>

<style lang="scss">
.help-box {
	padding: 30rpx;
	.help-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
	.help-tip {
		margin-bottom: 30rpx;
		.help-tip-item {
			text-align: center;
			background: #fff;
			border-radius: 5rpx;
			border: none;
			line-height: 50rpx;
			padding: 30rpx 0;
			font-size: 24rpx;
		}
		.tip-item-icon {
			font-size: 68rpx;
		}
		.custom-icon-kefu {
			color: #820f79;
		}
		.custom-icon-yijianfankui- {
			color: #118268;
		}
	}
	.collapse-box {
		background: #fff;
		margin-bottom: 30rpx;
		.collapse-title {
			color: #666;
			font-size: 30rpx;
			font-weight: bold;
			padding: 20rpx 10rpx;
		}
	}
}
</style>
